<template>
  <div class="ordering">
    <el-table :data="userList" style="width: 100%" max-height="250" highlight-current-row
      @current-change="handleCurrentChange">
      <el-table-column type="selection" width="80" />
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column fixed prop="rq" label="日期" width="150" />
      <el-table-column prop="djbh" label="单据编号" width="120" />
      <el-table-column prop="dwmc" label="单位名称" width="120" />
      <el-table-column prop="dwdz" label="单位地址" width="120" />
      <el-table-column prop="pihao" label="批号" width="250" />
      <el-table-column prop="shl" label="数量" width="120" />
      <el-table-column prop="city" label="城市" width="120" />
      <el-table-column fixed="spbh" label="商品编码" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
            Remove
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="queryParams.pageNum"
               v-model:limit="queryParams.pageSize"
               @pagination="getList"
            />
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button>
    <button class="bth">按钮</button>
    <!--    <el-button class="mt-4" style="width: 100%" @click="f"-->
    <!--    >获取</el-button-->
    <!--    >-->
  </div>



</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue'
import dayjs from 'dayjs'
const userList = ref([]);
const total = ref(0);
// import axi from axios
const now = new Date()
// httptool.get("weather_mini",{
//   params:{
//     city:"合肥"
//   },
//   headers:{"company":"vue company"},
// }).then(response=>{
//   console.log(response) //http响应头
//   console.log(response.data)//http响应的请求体数据
// }).catch(error=>{
//   console.log(error)//error可以是本地的错误信息，也可以是服务器的错误信息
//   alert(error)
//   alert(error.response)//接收来自服务器的响应错误，如果服务端没有错误，则没有response属性
// })
// http://127.0.0.1:8080/captcha/captchaImage?type=math'
// async().http.get('/spkc/saleorder/getseleorderlist', {
//         // params: {
//         //   type: 'math',
//         // },
//       }).then(function (response) {
//         const tableData=ref(response.data)
//       }).catch(function (error) {
//           alert("error的值"+error)
//           console.log(error);
//     })
const { proxy } = getCurrentInstance();
function getList() {
  loading.value = true;
  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    // loading.value = false;
    userList.value = res.rows;
    total.value = res.total;
  });
};

//   // https://www.tianqiapi.com/free/day?appid=23035354&appsecret=8YvlPNrz
//   axi.get('/free/day', {
//   params: {
//     appid: '23035354',
//     appsecret: '8YvlPNrz',
//     city: '合肥'
//   },
// }).then(function (response) {
//   console.log(response);
// })
//   .catch(function (error) {
//     console.log(error);
//   })

// const tableData = ref([
//   {
//     date: '2016-05-01',
//     name: '王五',
//     state: '宝山',
//     city: '上海',
//     address: '宝山区',
//     zip: '101010',
//   },
//   {
//     date: '2016-05-02',
//     name: '张三',
//     state: '蜀山',
//     city: '合肥',
//     address: '蜀山区',
//     zip: '231200',
//   },
//   {
//     date: '2016-05-03',
//     name: '李四',
//     state: '顺义',
//     city: '北京',
//     address: '顺义',
//     zip: '1111111',
//   },
// ])

const tableDatas = ref([
  {
    date: '2016-05-01',
    name: '王五',
    state: '宝山',
    city: '上海',
    address: '宝山区',
    zip: '101010',
  },
  {
    date: '2016-05-02',
    name: '张三',
    state: '蜀山',
    city: '合肥',
    address: '蜀山区',
    zip: '231200',
  },
  {
    date: '2016-05-03',
    name: '李四',
    state: '顺义',
    city: '北京',
    address: '顺义',
    zip: '1111111',
  },
])
console.log(tableDatas)
// console.log(tableData)

const deleteRow = (index) => {
  tableData.value.splice(index, 1)
}

const onAddItem = () => {
  now.setDate(now.getDate() + 1)
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD'),
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  })
}
const currentRow = ref()
const handleCurrentChange = (currentval) => {
  currentRow.value = currentval
  console.log(currentval.city)//获取选中行的各个属性的值
  console.log(currentRow.value.city)//获取选中行的各个属性的值
}
getList();
</script>
<style>
.bth {
  @apply bg-purple-500 text-indigo-50 px-4 py-2 rounded-full transition-all duration-500 hover: (bg-purple-900) focus:(ring-8 ring-purple-900);
}
</style>